<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高德地图步行轨迹模拟(PathSimplifier版)</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            font-family: Arial, sans-serif;
        }
        #container {
            width: 100%;
            height: 100%;
        }
        .control-panel {
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 100;
            background: rgba(255, 255, 255, 0.9);
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            max-width: 300px;
        }
        button {
            padding: 10px 15px;
            margin: 5px 0;
            background: #1E90FF;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            width: 100%;
            font-size: 14px;
            transition: background 0.3s;
        }
        button:hover {
            background: #187bcd;
        }
        button:disabled {
            background: #cccccc;
            cursor: not-allowed;
        }
        .slider-container {
            margin: 15px 0;
        }
        .slider-container label {
            display: block;
            margin-bottom: 5px;
            font-size: 14px;
            color: #333;
        }
        input[type="range"] {
            width: 100%;
        }
        .status {
            margin-top: 10px;
            padding: 8px;
            background: #f8f8f8;
            border-radius: 4px;
            font-size: 13px;
            color: #555;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <div class="control-panel">
        <h3>步行轨迹模拟控制</h3>
        <button id="initBtn">初始化地图</button>
        <button id="loadRouteBtn" disabled>加载步行路线</button>
        <button id="startSimulationBtn" disabled>开始模拟</button>
        <button id="pauseSimulationBtn" disabled>暂停模拟</button>
        <button id="resetSimulationBtn" disabled>重置模拟</button>
        
        <div class="slider-container">
            <label for="speedControl">模拟速度: <span id="speedValue">1</span>x</label>
            <input type="range" id="speedControl" min="0.1" max="5" step="0.1" value="1">
        </div>
        
        <div class="status" id="statusInfo">状态: 等待初始化...</div>
    </div>

    <!-- 引入高德地图JS API及PathSimplifier插件 -->
    <script src="https://webapi.amap.com/maps?v=2.0&key=6089b5b868160cd9820c162d02c1e10c"></script>
    <script src="https://webapi.amap.com/pathsimplifier/v1.0.0/pathsimplifier.js"></script>
    <script>
        // 全局变量
        let map = null;
        let pathSimplifier = null;
        let navg1 = null;
        let walkingPath = [];
        let isSimulating = false;
        let currentSpeed = 1;

        // DOM元素
        const initBtn = document.getElementById('initBtn');
        const loadRouteBtn = document.getElementById('loadRouteBtn');
        const startSimulationBtn = document.getElementById('startSimulationBtn');
        const pauseSimulationBtn = document.getElementById('pauseSimulationBtn');
        const resetSimulationBtn = document.getElementById('resetSimulationBtn');
        const speedControl = document.getElementById('speedControl');
        const speedValue = document.getElementById('speedValue');
        const statusInfo = document.getElementById('statusInfo');

        // 更新状态显示
        function updateStatus(message) {
            statusInfo.textContent = `状态: ${message}`;
            console.log(message);
        }

        // 初始化地图
        function initMap() {
            try {
                map = new AMap.Map('container', {
                    zoom: 15,
                    center: [116.397428, 39.90923],  // 北京天安门
                    viewMode: '2D',
                    resizeEnable: true
                });
                
                updateStatus("地图初始化成功");
                loadRouteBtn.disabled = false;
                initBtn.disabled = true;
                
                // 添加地图控件
                map.addControl(new AMap.ControlBar({
                    showZoomBar: true,
                    showControlButton: true,
                    position: {right: '10px', top: '10px'}
                }));
                
            } catch (error) {
                updateStatus(`地图初始化失败: ${error.message}`);
                console.error(error);
            }
        }

        // 加载步行路线
        function loadWalkingRoute() {
            if (!map) {
                updateStatus("请先初始化地图");
                return;
            }
            
            updateStatus("正在加载步行路线...");
            loadRouteBtn.disabled = true;
            
            AMap.plugin(['AMap.Walking'], function() {
                try {
                    const walking = new AMap.Walking({
                        map: map,
                        hideMarkers: true
                    });
                    
                    walking.search([
                        {keyword: '北京市海淀区中关村', city: '北京'},
                        {keyword: '北京市海淀区北京大学', city: '北京'}
                    ], function(status, result) {
                        if (status === 'complete') {
                            // 提取路径点
                            walkingPath = result.routes[0].steps.reduce((path, step) => {
                                return path.concat(step.path);
                            }, []);
                            
                            // 初始化PathSimplifier
                            initPathSimplifier(walkingPath);
                            
                            updateStatus("步行路线加载完成");
                            startSimulationBtn.disabled = false;
                            resetSimulationBtn.disabled = false;
                            
                        } else {
                            updateStatus("步行路线规划失败");
                            loadRouteBtn.disabled = false;
                        }
                    });
                } catch (error) {
                    updateStatus(`路线加载错误: ${error.message}`);
                    console.error(error);
                    loadRouteBtn.disabled = false;
                }
            });
        }

        // 初始化PathSimplifier
        function initPathSimplifier(path) {
            if (pathSimplifier) {
                pathSimplifier.setData([]);
                pathSimplifier.destroy();
            }
            
            pathSimplifier = new AMap.Plugins.PathSimplifier({
                zIndex: 100,
                map: map, // 所属地图
                getPath: function(pathData, pathIndex) {
                    return pathData.path;
                },
                getHoverTitle: function(pathData, pathIndex, pointIndex) {
                    return pathData.name;
                },
                renderOptions: {
                    renderAllPointsIfNumberBelow: 100, // 绘制路线节点
                    pathLineStyle: {
                        strokeStyle: '#3366FF',
                        lineWidth: 6,
                        dirArrowStyle: true
                    }
                }
            });
            
            // 设置轨迹数据
            pathSimplifier.setData([{
                name: '步行路线',
                path: path
            }]);
            
            // 创建导航器
            navg1 = pathSimplifier.createPathNavigator(0, {
                loop: false, // 不循环播放
                speed: 100, // 初始速度
                pathNavigatorStyle: {
                    width: 32,
                    height: 32,
                    content: AMap.Plugins.PathSimplifier.Render.Canvas.getImageContent(
                        'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
                        function() {
                            navg1.start();
                        }
                    ),
                    strokeStyle: null,
                    fillStyle: null
                }
            });
            
            // 调整地图视野
            map.setFitView(pathSimplifier.getOverlay());
        }

        // 开始轨迹模拟
        function startSimulation() {
            if (!navg1) {
                updateStatus("请先加载步行路线");
                return;
            }
            
            if (isSimulating) return;
            
            isSimulating = true;
            updateStatus("模拟进行中...");
            startSimulationBtn.disabled = true;
            pauseSimulationBtn.disabled = false;
            resetSimulationBtn.disabled = true;
            
            navg1.start();
            navg1.setSpeed(100 * currentSpeed);
        }

        // 暂停模拟
        function pauseSimulation() {
            if (!isSimulating || !navg1) return;
            
            navg1.pause();
            isSimulating = false;
            updateStatus("模拟已暂停");
            startSimulationBtn.disabled = false;
            pauseSimulationBtn.disabled = true;
            resetSimulationBtn.disabled = false;
        }

        // 重置模拟
        function resetSimulation() {
            if (!navg1) return;
            
            navg1.stop();
            isSimulating = false;
            
            // 重新初始化PathSimplifier
            initPathSimplifier(walkingPath);
            
            updateStatus("模拟已重置");
            startSimulationBtn.disabled = false;
            pauseSimulationBtn.disabled = true;
            resetSimulationBtn.disabled = true;
        }

        // 事件监听
        initBtn.addEventListener('click', initMap);
        loadRouteBtn.addEventListener('click', loadWalkingRoute);
        startSimulationBtn.addEventListener('click', startSimulation);
        pauseSimulationBtn.addEventListener('click', pauseSimulation);
        resetSimulationBtn.addEventListener('click', resetSimulation);
        
        speedControl.addEventListener('input', function() {
            currentSpeed = parseFloat(this.value);
            speedValue.textContent = currentSpeed.toFixed(1);
            
            if (isSimulating && navg1) {
                navg1.setSpeed(100 * currentSpeed);
            }
        });

        // 页面卸载时清理
        window.addEventListener('beforeunload', function() {
            if (pathSimplifier) {
                pathSimplifier.destroy();
            }
            if (map) {
                map.destroy();
            }
        });
    </script>
</body>
</html>